<template>
  <div :id="chartId" class="pie-instrument"></div>
</template>

<script>
import { ChartMixin } from './mixinChart'
export default {
  name: 'pieInstrument',
  mixins: [ChartMixin],
  props: {},
  data() {
    return {
      myChart: null,

      option: {
        title: {
          text: '双饼图仪表盘',
          top: 'middle',
          left: 'center'
        },
        series: [
          {
            // center: ['50%', '70%'],
            name: '外环',
            type: 'pie',
            radius: ['95%', '100%'],
            startAngle: 180,
            endAngle: 360,
            label: {
              show: false
            },
            emphasis: {
              disabled: true
            },
            itemStyle: {
              color(params) {
                const colors = ['#49ab44', '#e99056', '#f24850', '#f2485000']
                return colors[params.dataIndex]
              }
            },
            cursor: 'default',
            data: [
              { value: 75, name: '正常' },
              { value: 10, name: '预警' },
              { value: 15, name: '告警' },
              { value: 100, name: '透明' }
            ]
          },
          {
            name: '内环',
            type: 'pie',
            radius: ['70%', '93%'],
            startAngle: 180,
            endAngle: 360,
            label: {
              show: false
            },
            emphasis: {
              disabled: true
            },
            itemStyle: {
              color(params) {
                const colors = ['#e99056', '#e6e6e6']
                return colors[params.dataIndex]
              }
            },
            cursor: 'default',
            data: [
              { value: 81, name: '已使用' },
              { value: 19, name: '未使用' },
              { value: 100, name: '透明' }
            ]
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="scss">
.pie-instrument {
  height: 400px;
}
</style>
